<template>
  <!-- 查询数据区域开始 -->
  <div class="row">
    <div>
      <data-source-code
        v-if="showDataSourceCode"
        title="玩法数据源"
        :show_all="false"
        :not_pa="2"
        @change="queryform_form_dataSourceCode_change"
      />
    </div>
    <div class="flex q-px-md items-center">
      <q-select
        v-for="(item, index) in queryformItem"
        :key="index"
        filled
        rounded
        class="w150x q-mr-lg"
        color="panda-text-light"
        bg-color="panda-light-light"
        v-model="queryform_form.matchStatus"
        hide-bottom-space
        :options="compute_play_status_constant()"
        emit-value
        map-options
        option-value="id"
        option-label="value"
        dense
        options-dense
        popup-content-class="bg-panda-light-light text-panda-text-light"
      >
        <template v-slot:before>
          <span class="text-panda-text-dark">{{ item.title}}</span>
        </template>
      </q-select>
    </div>
    <div>
      <panda-btn v-bind="$attrs.btn" v-if="showBtnArea" v-on="$listeners"/>
    </div>
  </div>
  <!-- 查询数据区域结束 -->
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    showDataSourceCode: {
      default: false
    },
    queryformItem: {
      default() {
        return [{ title: "玩法集类型" }, { title: "玩法集状态" }];
      }
    },
    showBtnArea: {
      default: false
    }
  },
  components: {
    dataSourceCode: () => import("src/components/query/dataSourceCode.vue"),
    pandaBtn: () => import("src/components/btn/btn.vue")
  },
  data() {
    return {
      queryform_form: {},
    };
  },
  methods: {
    compute_play_status_constant() {}
  }
};
</script>